<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/9
  Time: 15:19
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户注册</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="<%=request.getContextPath()%>/static/js/jquery-3.4.1.js" charset="UTF-8" type="text/javascript"></script>
    <link href="<%=request.getContextPath()%>/static/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/button.css" />
    <script src="<%=request.getContextPath()%>/static/js/bootstrap.js" charset="UTF-8" type="text/javascript"></script>
    <style type="text/css">
        #top{
            height: 15%;
        }

    </style>
    <script type="text/javascript">
        var system ={};
        var p = navigator.platform;
        system.win = p.indexOf("Win") == 0;
        system.mac = p.indexOf("Mac") == 0;
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
        if(system.win||system.mac||system.xll){//如果是电脑跳转到
            window.location.href="#";
        }else{  //如果是手机,跳转到
            window.location.href="${pageContext.request.contextPath}/index.jsp";
        }
    </script>
</head>
<body>


<div class="container">
    <div class="row">
        <div id="top">
            <img src="<%=request.getContextPath()%>/static/img/1009.jpg" width="100%">
            <h3 class="text-center">注册二次元用户</h3>
            <h4 class="text-center"><span style="color: #2aabd2">${error}</span></h4>
        </div>

        <div id="body">
            <form class="form-horizontal" onsubmit="return register()"  method="post" action="${pageContext.request.contextPath}/user/register" name="registerForm" id="registerForm" >
                <!-- user_name  -->
                <div class="form-group">
                    <label for="userName" class="col-sm-2 control-label">姓名：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="姓名" name="userName" id="userName" required="required"/>
                    </div>
                </div>

                <!--  user_password -->
                <div class="form-group">
                    <label for="userPassword" class="col-sm-2 control-label">密码:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" placeholder="密码" name="userPassword" id="userPassword" required="required"/>
                    </div>
                </div>

                <!-- user_password_two  -->
                <div class="form-group">
                    <label for="userPasswordTwo" class="col-sm-2 control-label">确认密码：</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" placeholder="确认密码" name="userPasswordTwo" id="userPasswordTwo" required="required"/>
                    </div>
                </div>

                <!-- phone  -->
                <div class="form-group">
                    <label for="phone" class="col-sm-2 control-label">手机号：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="手机号" id="phone" name="phone" required="required"/>
                    </div>
                </div>

                <!-- age  -->
                <div class="form-group">
                    <label for="age" class="col-sm-2 control-label">年龄：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="年龄" name="age" id="age" required="required"/>
                    </div>
                </div>

                <!-- sex  -->
                <div class="form-group">
                    <label for="sex" class="col-sm-2 control-label">性别：</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="sex" name="sex">
                            <option value="-1">请选择性别</option>
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="button button--antiman button--round-l button--text-medium" id="btn">点击提交</button>
                    </div>
                 </div>
            </form>

            <div class="box bg-1">
                <button class="button button--antiman button--round-l button--text-medium" onclick="window.open('${pageContext.request.contextPath}/index.jsp')"><span>返回首页</span></button>
            </div>


        </div>

        <div id="foot">

        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    function register(){
        var password1 = document.registerForm.userPassword.value;
        var password2 = document.registerForm.userPasswordTwo.value;
        var userName = document.registerForm.userName.value;
        var phone = document.registerForm.phone.value;

        console.log(password1);
        console.log(password2);

        var patternPassword = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
        var patternPhone = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;

        if (password1!=password2){
            alert("两次密码不一致！");
            return false;
        }


        if(!patternPassword.test(password1)){
            alert("密码必须要有大小写字母，数字，和特殊符号！");
            return false;
        }

        if (!patternPhone.test(phone)){
            alert("手机号异常！");
            return false;
        }
    }
</script>

</html>

